<template>
    <tr>
      <td>{{ site.siteName }}</td>
      <td><a  :href="site.siteHref" :title="site.siteHref">点击查看</a></td>
      <!-- <td class="href"><a class="sb" :href="site.siteHref">点击查看</a></td> -->
      <td>{{ site.siteMessage }}</td>
      <td>{{ site.sityEmail }}</td>
      <td>
        <p>
          <a
            @click="updateSiteCoed(1)"
            :style="site.siteCode === 1 ? style : ''"
            style="background: #7ad305"
            class="state"
            href="javascript:;"
          ></a>
          <a
            @click="updateSiteCoed(0)"
            :style="site.siteCode === 0 ? style : ''"
            style="background: #cfd305"
            class="state"
            href="javascript:;"
          ></a>
          <a
            @click="updateSiteCoed(2)"
            :style="site.siteCode === 2 ? style : ''"
            style="background: #d32405"
            class="state"
            href="javascript:;"
          ></a>
        </p>
      </td>
    </tr>
</template>

<script>
export default {
  props: ["site"],
  data() {
    return {
      style: "width:30px;height:30px",
    };
  },
  methods:{
    updateSiteCoed(code){
     var data = {id:this.site.siteId,code:code}
       this.$emit('updateSiteCoed',data);
       this.site.siteCode=code
    }
  }
};
</script>

<style scoped lang="less">
      p{
        text-align: center;
        line-height: 60px;
        .state{
          width: 15px;
          height: 15px;
          display: inline-block;
          background: #7ad305;
          border-radius: 50%;
          line-height: 150px;
          margin-left: 5px;
       }
      }
      a{
        color: blue;
      }
</style>